<template>
    <!--免费直播-->
    <div class="contain">
        <div class="layout-col m-1">
            <!--主推栏目-->
            <div class="live-intro-left" v-if="topVideo">
                <h5 class="intro-title">{{topVideo.v_f_l.live_name}}</h5>
                <div class="intro-img">
                    <img src="//cxxf.caixinedu.cn/1602218240827cfc9f867dd9141143365a9acf8793fd.jpg" alt="" />
                </div>
                <p class="intro-extra">{{topVideo.v_f_l.live_desc}}</p>
                <div class="intro-link" @click="handleJumpToLive(topVideo.v_f_l.channelid,'id')">进入直播间</div>
            </div>
            <!--主页轮播-->
            <div class="banner" v-show="isShowBanner">
                <div class="swiper-container banner-swipe">
                    <div class="swiper-wrapper">
                        <div
                            v-for="ads in adsList"
                            :key="ads.id"
                            class="swiper-slide"
                            :class="ads.default"
                        >
                            <a class="banner-ads" :href="ads.h5_url" v-if="ads.h5_url">
                                <img :alt="ads.gg_name" :src="ads.pic_url" />
                            </a>
                        </div>
                    </div>
                    <!-- 分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
        <div class="m-contain">
            <h4 class="m-title">
                <span>近期直播</span>
                <p>互动有趣又有料</p>
            </h4>
        </div>
        <div class="timeLine-box">
            <div class="swiper-container banner-swipe2">
                <div class="swiper-wrapper">
                    <div
                        v-for="item in videoTimeLineList"
                        :key="item.id"
                        class="swiper-slide timeLine-item"
                    >
                        <!--卡片内容-->
                        <div class="intro-panel">
                            <div class="intro-msg">
                                <div class="intro-back">
                                    <img src="//cxxf.caixinedu.cn/1602218240827cfc9f867dd9141143365a9acf8793fd.jpg" alt="" />
                                </div>
                                <div class="live-title">{{item.live_name}}</div>
                                <div class="live-btn" v-if="item.playStatus === 1 || (item.playStatus === -1 && item.is_kt_record == 1)">
                                    <span
                                        class="live-door"
                                        @click="handleJumpToLive(item.channelid)"
                                    >进入</span>
                                </div>
                                <div class="live-btn" v-if="item.playStatus === -1 && item.is_kt_record == 2">
                                    <span class="live-door">已结束</span>
                                </div>
                                <div class="live-btn" v-if="item.playStatus === 0 && item.zt === '未预约'">
                                    <span class="live-order"
                                          @click="ajaxOrderLive(item.id)"
                                    >预约</span>
                                </div>
                                <div class="live-btn" v-if="item.playStatus === 0 && item.zt !== '未预约'">
                                    <span  class="live-ordered"
                                    >已预约</span>
                                </div>
                            </div>
                            <div class="intro-base">
                                <div class="intro-author">
                                    <i><img alt="" /></i>
                                    <span>{{item.teacher_name}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="timeLine"></div>
                        <div class="timeline-date">
                            <span class="date">{{ $util.dateConverter('MM月dd日',item.live_bg_time) }}</span>
                            <span class="time">{{ $util.dateConverter('hh:mm',item.live_bg_time) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-contain">
            <h4 class="m-title">
                <span>往期直播</span>
                <p>一证在手工作不愁</p>
            </h4>
            <ul class="m-video-list">
                <li class="video-intro" v-for="video in videoList" :key="video">
                    <div class="intro-left">
                        <img :src="video.live.live_fm_pic" alt=""/>
                    </div>
                    <div class="intro-right">
                        <h5>{{video.live.live_name}}</h5>
                        <div class="intro-line">
                            <div class="intro-teacher">
                                <i class="icon-user"></i>
                                <span>讲师：{{video.live.teacher_name}}</span>
                                <i class="split-line"></i>
                            </div>
                            <div class="intro-teacher">
                                <i></i>
                                <span>时长：
                                    {{computeTime(video.live.live_bg_time,video.live.live_ed_time)}}
                                </span>
                            </div>
                        </div>
                        <div class="intro-btn"
                             @click="handleJumpToVideo(video.live.channelid)"
                             v-if="video.live.is_kt_record == 1"
                        >查看回放</div>
                        <div class="intro-btn disable"
                             v-if="video.live.is_kt_record == 2"
                        >暂无回放</div>
                    </div>
                </li>
            </ul>
        </div>
        <copyright></copyright>
    </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
import 'swiper/js/swiper.min.js';
import copyright from '../../components/copyright';
export default {
    name: 'FreeLive',
    components: {
        copyright
    },
    data() {
        return {
            account: '',
            isShowBanner: true,
            adsList: [],
            topVideo: null, // 顶部推荐的直播
            videoTimeLineList: [],
            videoList: [],
            banner: null,
            timeline: null
        };
    },
    watch: {
        /**/
    },
    mounted() {
        if(!this.$util.authLogin()) {
            location.replace('/login');
        } else {
            this.ajaxGetFreeLive();
            this.initAdsList();
            this.initFreeLive();
        }
    },
    methods: {
        // 初始化首屏广告
        initAdsList() {
            this.adsList = [
                {
                    default: 'def',
                    h5_url: '',
                    pic_url: null
                }
            ];
//            this.ajaxGetGgList()
//                .then(res => {
//                    this.isShowBanner = true;
//                    this.adsList = res.obj;
//                    this.$nextTick(() => {
//                        this.initSwipe();
//                    });
//                })
//                .catch(() => {
//                    this.isShowBanner = true;
//                    this.adsList = [
//                        {
//                            default: 'def',
//                            h5_url: '',
//                            pic_url: null
//                        }
//                    ];
//                    this.$nextTick(() => {
//                        this.initSwipe();
//                    });
//                    //this.isShowBanner = false;
//                });
        },
        // 初始化轮播图
        initSwipe() {
            this.banner = new Swiper('.banner-swipe', {
                // 如果需要分页器
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //如果需要自动切换海报
                autoplay: {
                    delay: 3000, //时间 毫秒
                    disableOnInteraction: false //用户操作之后是否停止自动轮播
                }
            });
        },
        // 近期直播
        initSwipeLive() {
            this.$nextTick(()=>{
                this.timeline = new Swiper('.banner-swipe2', {
                    slidesPerView : 4,
                    slidesPerGroup : 4,
                    // 如果需要滚动条
                    scrollbar: '.swiper-scrollbar'
                });
            });
        },
        initFreeLive() {
            // 近期直播
            this.ajaxGetVideoList()
                .then(res => {
                    let timeLine = res.obj.zj;
                    timeLine.sort((a,b) =>{
                        return a.live.live_bg_time - b.live.live_bg_time
                    });
                    let nowTime = new Date().getTime();
                    let tempList = [];
                    timeLine.forEach(item=> {
                        let temp = Object.assign({
                            zt: item.zt
                        },item.live);
                        if (nowTime < temp.live_bg_time) {
                            // 未开始
                            temp.playStatus = 0;
                        } else if(temp.live_bg_time <= nowTime && nowTime <=temp.live_ed_time || !temp.live_ed_time) {
                            // 直播中
                            temp.playStatus = 1;
                        } else {
                            // 直播结束
                            temp.playStatus = -1;
                        }
                        tempList.push(temp);
                    });
                    this.videoTimeLineList= tempList;
                    console.log(tempList)
                    this.videoList = res.obj.hf;
                    this.initSwipeLive();
                })
        },
        // 获取广告列表
        ajaxGetGgList() {
            let option = {
                pathName: 'getGgList'
            };
            return this.$api.ajaxData(option);
        },
        // 免费直播
        ajaxGetFreeLive() {
            let option = {
                pathName: 'doGetFreeLive',
            };
            this.$api.ajaxData(option)
                .then(res => {
                    this.topVideo = res.obj[0]
                });
        },
        // 获取视频列表
        ajaxGetVideoList() {
            let option = {
                pathName: 'doGetFreeLives',
                authorization: true,
            };
            return this.$api.ajaxData(option);
        },
        // 预约
        ajaxOrderLive(id) {
            let option = {
                pathName: 'doLiveYuYue',
                authorization: true,
                params:{
                    'live_id': id,
                    'st_id': this.$api.getAccount().id
                },
            };
            this.$api.ajaxData(option)
                .then(res => {
                    if(res.code === 200) {
                        this.$util.alert('预约成功');

                        this.initFreeLive();
                    } else {
                        this.$util.alert(res.data.msg);
                    }
                });
        },
        // 时长处理
        computeTime(bt,et) {
            let count = et - bt;
            let hour = Math.floor(count / 60 / 60 /1000);
            let mint = Math.floor((count - hour * 3600000) / 60000);
            let second = Math.floor(count / 60000 % 60);
            let str = ''
            str += hour > 0 ? hour + '时': ''
            str += mint + '分'
            str += second + '秒'
            return str
        },
        //跳转直播页面
        handleJumpToLive(id,key) {
            let routeData
            if(key === 'id') {
                routeData = this.$router.resolve({ name: 'live', query: {  id: id,type: 1 } });
            } else {
                routeData = this.$router.resolve({ name: 'live', query: {  channelId: id,type: 1 } });
            }
            window.open(routeData.href, '_blank');
        },
        // 录播放
        handleJumpToVideo(id) {
            let routeData = this.$router.resolve({ name: 'live', query: {  channelId: id,type: 3 } });
            window.open(routeData.href, '_blank');
        }
    }
};
</script>
<style scoped lang="scss">
.contain {
    position: relative;
    padding: 20px 8px 0;
    .layout-col {
        display: flex;
        .live-intro-left {
            position: relative;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            width: 250px;
            padding: 30px 16px 16px 16px;
            max-height: 340px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            background: linear-gradient(to bottom, #69f 35%, #0179fe);
            box-sizing: border-box;
            .intro-title {
                margin-bottom: 50px;
                font-weight: 700;
                font-size: 20px;
                color: #fff;
            }
            .intro-img {
                width: 80px;
                height: 80px;
                margin: 0 auto;
                border-radius: 40px;
                border: 1px solid #fff;
                background: rgba(255, 255, 255, 0.7);
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    border: 0;
                }
            }
            .intro-extra {
                line-height: 52px;
                margin-bottom: 10px;
                font-size: 14px;
                color: #fff;
                text-align: center;
            }
            .intro-link {
                width: 122px;
                height: 36px;
                line-height: 36px;
                margin: 0 auto;
                border-radius: 10px;
                font-size: 13px;
                color: #0079fe;
                background: #fff;
                text-align: center;
                cursor: pointer;
            }
        }
        .banner {
            flex: 1 1;
            width: calc(100% - 250px);
            max-height: 340px;
            min-height: 340px;
            .swiper-container {
                height: 100%;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                overflow: hidden;
                .swiper-slide {
                    height: 100%;
                    .banner-ads {
                        width: 100%;
                        height: 100%;
                        img {
                            width: 100%;
                            height: 100%;
                            border: none;
                        }
                    }
                    &.def {
                        background: url("../../assets/image/sucai/497156013750147704.jpg") no-repeat;
                        background-size: cover;
                    }
                }
            }
        }
    }
}
.m-contain {
    .m-title {
        line-height: 60px;
        height: 60px;
        span {
            display: inline-block;
            font-size: 20px;
        }
        p {
            display: inline-block;
            padding: 0 8px;
            font-size: 13px;
            color: #666;
        }
    }
    .m-video-list {
        display: flex;
        flex-wrap: wrap;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        .video-intro {
            display: flex;
            width: 45%;
            margin-bottom: 20px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
            &:nth-child(odd) {
                margin-right: 10%;
            }
            .intro-left {
                display: flex;
                align-items: center;
                padding: 20px 0 20px 20px;
                width: 235px;
                height: 147px;
                box-sizing: border-box;
                text-align: center;
                img {
                    width: auto;
                    max-width: 100%;
                    height: 100%;
                    margin: 0 auto;
                }
            }
            .intro-right {
                flex: 1;
                padding: 20px;
                h5 {
                }
                .intro-line {
                    display: flex;
                    flex-wrap: wrap;
                    height: 70px;
                    line-height: 20px;
                    font-size: 13px;
                    color: #999;
                    .intro-teacher {
                        display: flex;
                        align-items: center;
                        .icon-user {
                            display: block;
                            width: 15px;
                            height: 17px;
                            margin-right: 10px;
                            background: url("../../assets/image/icon/u117.png") no-repeat;
                            background-size: contain;
                        }
                        .split-line {
                            height: 14px;
                            width: 1px;
                            margin: 0 12px;
                            background: #cecece;
                        }
                    }
                }
                .intro-btn {
                    width: 102px;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #0079fe;
                    border-radius: 15px;
                    font-size: 12px;
                    text-align: center;
                    color: #0079fe;
                    cursor: pointer;
                    &.disable {
                        color: #999;
                        border-color: #999;
                    }
                }
            }
        }
    }
}
.swiper-button-next,
.swiper-button-prev {
    width: calc(var(--swiper-navigation-size) / 44 * 40);
    height: calc(var(--swiper-navigation-size) / 44 * 40);
}
.swiper-button-prev:after {
    content: '';
    width: 100%;
    height: 100%;
    background: url('../../assets/image/icon/u281.png') no-repeat;
    background-size: contain;
}
.swiper-button-next:after {
    content: '';
    width: 100%;
    height: 100%;
    background: url('../../assets/image/icon/u279.png') no-repeat;
    background-size: contain;
}
.timeLine-box {
    .timeLine-item {
        position: relative;
        padding: 184px 0 10px;
        .intro-panel {
            position: absolute;
            left: 50%;
            top: 0;
            width: 215px;
            height: 157px;
            transform: translateX(-50%);
            .intro-msg {
                position: relative;
                .intro-back {
                    position: relative;
                    height: 117px;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    background: rgba(51, 51, 51, 0.6);
                    img {
                        height: 100%;
                        width: 100%;
                    }
                    &:before {
                        content: '';
                        position: absolute;
                        display: block;
                        width: 100%;
                        height: 100%;
                        background: rgba(0,0,0,0.5);
                    }
                }
                .live-title {
                    position: absolute;
                    top: 25%;
                    left: 0;
                    width: 100%;
                    font-size: 20px;
                    font-weight: bold;
                    text-align: center;
                    color: #fff;
                }
                .live-btn {
                    position: absolute;
                    left: 50%;
                    bottom: 15px;
                    height: 20px;
                    width: 71px;
                    border-radius: 10px;
                    background: #fff;
                    font-size: 13px;
                    font-weight: 700;
                    font-style: normal;
                    color: #006ADE;
                    text-align: center;
                    transform: translateX(-50%);
                    cursor: pointer;
                }
            }
            .intro-base {
                height: 41px;
                line-height: 41px;
                padding: 0 6px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                background: #f2f2f2;
                .intro-author {
                    display: flex;
                    align-items: center;
                    i {
                        display: block;
                        width: 26px;
                        height: 26px;
                        margin-right: 10px;
                        border-radius: 50%;
                        background: #ccc;
                    }
                    span {
                        font-size: 13px;
                        color: #333;
                    }
                }
            }
            &:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                margin: 0 auto;
                border-top: 18px solid #f2f2f2;
                border-left: 15px solid transparent;
                border-right: 15px solid transparent;
            }
        }
        .timeLine {
            position: relative;
            width: 100%;
            height: 4px;
            background: #7fbcfe;
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #0079fe;
                transform: translate(-50%, -50%);
            }
        }
        .timeline-date {
            margin-top: 10px;
            line-height: 30px;
            text-align: center;
            .date {
                margin-right: 10px;
                font-size: 18px;
                font-weight: bold;
                color: #333;
            }
            .time {
                font-size: 16px;
                color: #666;
            }
        }
    }
}
</style>
